<script lang="ts" setup>
import { report } from '@/libs/request'
import { curHomeTarbarKey, homeTarbarList } from './data'
import { safeBottom } from '@/libs/config'

const onClick = (item: any) => {
  curHomeTarbarKey.value = item.key

  report('main_tabbar_click', {
    tabbar_key: item.key,
    tabbar_name: item.title,
  })
}
</script>

<template>
  <div
    class="tab-bar"
    :style="{ paddingBottom: safeBottom }"
  >
    <div class="list">
      <div
        v-for="(item, index) in homeTarbarList"
        :key="index"
        class="item"
        :class="{ active: curHomeTarbarKey === item.key }"
        @click="onClick(item)"
      >
        <div
          class="icon"
          :style="{ backgroundImage: item.icon }"
        ></div>
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 130rpx;

  border: 2rpx solid #fff;
  border-bottom: none;
  border-radius: 16rpx 16rpx 0 0;

  background-color: rgba(255, 205, 233, .6);
  backdrop-filter: blur(12rpx);

  .list {
    width: 100%;
    height: 130rpx;

    margin-top: 14rpx;

    box-sizing: border-box;
    padding: 0 50rpx;

    display: flex;
    justify-content: space-between;

    .item {
      position: relative;
      width: 92rpx;
      height: 92rpx;

      box-sizing: border-box;
      padding-top: 56rpx;

      color: #fff;
      font-size: 24rpx;
      text-align: center;

      border: 4rpx solid #FFF3C4;
      border-radius: 16rpx;

      background-image: linear-gradient(180deg, rgba(143, 255, 245, .3) 0%, rgba(255, 98, 246, .3) 100%);
      backdrop-filter: blur(12rpx);

      box-shadow: 0 0 16rpx #FFFCF2 inset, 0 0 16rpx #CAB6FF;

      transform-origin: center bottom;

      transition: .2s;

      &.active {
        transform: scale(1.36);
        box-shadow: 0 0 16rpx #FFFCF2 inset, 0 0 16rpx #C31EFF;
      }

      .icon {
        position: absolute;
        left: 0;
        bottom: 30rpx;
        width: 100%;
        height: 66rpx;

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center bottom;
      }
    }
  }
}
</style>
